require(['./config'], () => {
    require(['template', 'header', 'footer'], (template, header) => {
        class Shopcar {
            constructor() {
                this.render();
            }
            render() {
                const cart = localStorage.getItem('cart');
                this.cart = JSON.parse(cart);
                // console.log(this.cart)
                if (this.cart === []) {
                    localStorage.removeItem('cart');
                }
                if (cart) {
                    $('#shop_tbody').html(template('cartTemplate-1', { cart: this.cart }));
                    this.cartOperate();
                } else {
                    $('#mian-c').hide();
                    $('#carNull').show();
                }
            }
            //cart有数据时的一些操作
            cartOperate() {
                this.setAllCheckStatus();//设置全选
                this.calcTotalMoney();//计算总价
                this.checksChange();//监听单选change事件
                this.allCheckChange();//监听全选change事件
                this.numAdd();//监听数量加事件
                this.numsub();//监听数量减事件
                this.removeShop();//移除所选商品
            }
            setAllCheckStatus() {
                // 根据this.cart是否全部选中来决定
                const isAllCheck = this.cart.every(shop => shop.check);
                $('#allCheck').prop('checked', isAllCheck);
            }
            calcTotalMoney() {
                // 计算购物车总价
                const money = this.cart.reduce((total, shop) => {
                    return total += shop.check ? shop.price * shop.count : 0;
                    //   total;
                }, 0)
                $('#allMoney').html(money.toFixed(2));
            }
            checksChange() {
                const _this = this;
                $('.checks').on('change', function () {
                    const isCheck = $(this).prop('checked');
                    const id = $(this).parents('tr').data('id');
                    // 根据id修改this.cart
                    _this.cart = _this.cart.map((shop) => {
                        if (shop.id === id) shop.check = isCheck;
                        return shop;
                    })
                    // 存localStorage
                    localStorage.setItem('cart', JSON.stringify(_this.cart));
                    // 修改DOM
                    _this.setAllCheckStatus();
                    _this.calcTotalMoney();
                    //  header.calcCartCount();
                    //  console.dir(header.calcCartCount())
                })
            }
            allCheckChange() {
                const _this = this;
                $('#allCheck').on('change', function () {
                    const isCheck = $(this).prop('checked');
                    _this.cart.forEach(shop => {
                        shop.check = isCheck;
                    });
                    // 存localStorage
                    localStorage.setItem('cart', JSON.stringify(_this.cart));
                    // 修改DOM
                    _this.calcTotalMoney();
                    $('.checks').prop('checked', isCheck);
                })
            }
            numAdd() {
                const _this = this;
                $('.add').on('click', function () {
                    const id = $(this).parents('tr').data('id');
                    _this.cart = _this.cart.map((shop) => {
                        if (shop.id === id) shop.count++;
                        return shop;
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart));
                    // 修改DOM
                    $(this).prev().val($(this).prev().val() - 0 + 1);
                    _this.calcTotalMoney();
                    header.calcCartCount();
                })
            }
            numsub() {
                const _this = this;
                $('.reduce').on('click', function () {
                    const id = $(this).parents('tr').data('id');
                    _this.cart = _this.cart.map((shop) => {
                        if (shop.id === id) shop.count > 1 ? shop.count-- : shop.count = 1;
                        return shop;
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart));
                    // 修改DOM
                    if ($(this).next().val() - 0 <= 1) {
                        $(this).next().val(1);
                    } else {
                        $(this).next().val($(this).next().val() - 0 - 1);
                    }
                    _this.calcTotalMoney();
                    header.calcCartCount();
                })
            }
            removeShop() {
                const _this = this;
                $('.removeShop').on('click', function () {
                    if (confirm('确定删除吗？')) {
                        const id = $(this).parents('tr').data('id');
                        _this.cart = _this.cart.filter((shop) => {
                            return shop.id != id;
                        })
                        // 存localStorage
                        localStorage.setItem('cart', JSON.stringify(_this.cart))
                        $(this).parents('tr').remove();
                        _this.calcTotalMoney();
                        header.calcCartCount();
                        _this.setAllCheckStatus();
                        const isNull = JSON.parse(localStorage.getItem('cart'));
                        if (isNull.length === 0) {
                            $('#mian-c').hide();
                            $('#carNull').show();
                            localStorage.removeItem('cart');
                           
                        }
                    }
                })
            }
        }
        new Shopcar();
    })
})